<template>
  <div class="info_config_page">
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')"
        size="small"
        icon="el-icon-plus"
        class="add-btn"
        @click="addCategorys"
      >新增品类</el-button>
    </div>
    <el-table
      :data="tableData"
      row-key="id"
      border
      :tree-props="{children: 'children'}"
    >
      <el-table-column
        align="center"
        label="展开"
        width="120"
      >
      </el-table-column>
      <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
      <el-table-column
        align="center"
        label="排序"
        width="80"
      >
        <template slot-scope="scope">
          <span v-if="!$hasMethod('#sort')">{{scope.row.displayorder}}</span>
          <el-input
            v-else
            oninput="value=value.replace(/[^\d]/g,'')"
            maxLength='9'
            v-model="scope.row.displayorder"
            @change="changeSort(scope.row.id, scope.row.displayorder)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="ID"
        width="150"
        prop="id"
      >
        <!-- <template slot-scope="scope">
          <span>{{scope.row.children?scope.row.id:scope.row.id}}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        label="品类名称"
      >
        <template slot-scope="scope">
          <p><span
              style="margin:0 5px 0 20px;"
              v-if="!scope.row.children"
            >├─</span>{{scope.row.name}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="$hasMethod('#enable')"
            :type="scope.row.enabled==1?'success':'danger'"
          >{{scope.row.enabled==1?'显示':'隐藏'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.children && $hasMethod('#enable')"
            size="mini"
            type="success"
            @click="addItemChild(scope.row)"
          >添加子菜单</el-button>
          <el-button
            v-if="$hasMethod('#edit')"
            size="mini"
            type="primary"
            @click="editItem(scope.row)"
          >编辑</el-button>
          <!-- @click="$router.push({name:'infoCategoryListAdd',params:{type:'info',editId:scope.row.id}})" -->
          <el-button
            size="mini"
            type="warning"
            v-if="$hasMethod('#enable')"
            @click="handleEnable(scope.row.id, scope.row.enabled)"
          >{{scope.row.enabled==1?'隐藏':'显示'}}</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="$hasMethod('#delete')"
            @click="removeItem(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <add-category
      :parentVisible="parentVisible"
      :parentForm="parentForm"
      :dialogTitle="dialogTitle"
      @submitForm="submitForm"
      @closeDialog="closeDialog"
      @setUrl="setUrl"
      ref="cateForm"
    ></add-category>
    <add-child
      :childVisible="childVisible"
      :childForm="childForm"
      :dialogTitle="dialogTitle"
      :firstLevel="firstLevel"
      :rent_list="rent_list"
      :insurance_list="insurance_list"
      :zlb_list="zlb_list"
      :insure_list="insure_list"
      @submitForm="submitChildForm"
      @closeDialog="closeDialog"
      @setUrl="setChileUrl"
    ></add-child>
  </div>
</template>

<script>
import { categoryList, getCategoryInfo, updateCategory, delCategory, getAlipayCategory } from "@/api/info";
import addCategory from "../list/addCategory"
import addChild from "../list/addChild"
import customPage from "@/components/customPage";
export default {
  components: { addCategory, addChild, customPage },
  data() {
    return {
      tableData: [],
      firstLevel: [],
      parentVisible: false,
      childVisible: false,
      dialogTitle: '',
      total: 0,
      parentForm: {
        id: "",
        addType: "parent",
        parentid: 0,
        name: "",
        image: "",
        link: "",
        enabled: 1,
        displayorder: "",
      },
      childForm: {
        id: "",
        addType: "children",
        parentid: "",
        name: "",
        image: "",
        link: "",
        enabled: 1,
        displayorder: "",
        rent_category: "",
        // insurance_category: "",
        zlb_class: "",
      },
      rent_list: [],
      insurance_list: [],
      zlb_list: [],
      insure_list: []
    }
  },
  methods: {
    // 列表项删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delCategory({
          id
        }).then(res => {
          this.getList();
        });
      });
    },
    handleEnable(id, enabled) {
      this.$confirm('确认要修改状态吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        let status = enabled == 1 ? 0 : 1
        updateCategory({
          id,
          enabled: status,
        }).then(res => {
          this.getList();
        })

      });
    },
    editItem(row) {
      // if (this.$refs.cateForm.$refs.parentForm) {
      //   this.$refs.cateForm.$refs.parentForm.resetFields();
      // }
      let obj = { ...row }
      if (row.parentid == 0) {
        this.dialogTitle = '编辑品类'
        this.parentVisible = true
        this.parentForm = obj
      } else {
        this.dialogTitle = '编辑子菜单'
        this.childVisible = true
        this.childForm = obj
      }
    },
    // 更改排序
    changeSort(id, num) {
      updateCategory({
        id,
        displayorder: num,
      }).then(res => {
        this.getList();
      })
    },
    setUrl(val) {
      this.parentForm.image = val;
    },
    setChileUrl(val) {
      this.childForm.image = val;
    },
    addCategorys() {
      // if (this.$refs.cateForm.$refs.parentForm) {
      //   this.$refs.cateForm.$refs.parentForm.resetFields();
      // }
      // this.$nextTick(() => {
      //   this.$refs.cateForm.$refs.parentForm.resetFields();
      // })
      this.dialogTitle = '新增品类'
      this.parentForm = {
        id: "",
        addType: "parent",
        parentid: 0,
        name: "",
        image: "",
        link: "",
        enabled: 1,
        displayorder: "",
      }
      this.parentVisible = true
    },
    submitForm(val) {
      let firetForm = { ...this.parentForm }
      let obj = {
        id: this.parentForm.id || "",
        addType: "parent",
        parentid: 0,
      }
      if (this.parentForm.id > 0) {
        delete firetForm.children
        delete obj.addType
      }
      firetForm.displayorder = firetForm.displayorder + '';
      updateCategory({
        ...obj, ...firetForm
      }).then(res => {
        this.parentVisible = false
        this.getList();
      })
    },
    submitChildForm(val) {
      let obj = {
        id: this.childForm.id || "",
        addType: "children",
      }
      if (obj.id) {
        delete obj.addType
      }
      const params = { ...this.childForm };
      params.displayorder = params.displayorder + '';
      updateCategory({ ...obj, ...params }).then(res => {
        this.childVisible = false
        this.getList();
      })
    },
    addItemChild(row) {
      let pid = row.id
      this.dialogTitle = '添加子菜单'
      this.childForm = {
        id: "",
        addType: "children",
        parentid: "",
        name: "",
        image: "",
        link: "",
        enabled: 1,
        displayorder: "",
        rent_category: "",
        zlb_class: "",
      }
      this.childForm.enabled = 1
      this.childVisible = true
      this.childForm['parentid'] = pid || ''
    },
    closeDialog() {
      this.parentVisible = false;
      this.childVisible = false;
    },
    // 获取列表
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      categoryList({
        page,
        pageSize,
      }).then(res => {
        this.tableData = res.data;
        this.total = res.total;
        res.data.forEach(item => {
          this.firstLevel.push({
            id: item.id,
            name: item.name,
          })
        })
      })
    },
    getSelect() {
      getAlipayCategory().then(res => {
        this.rent_list = res.rent_list;
        this.zlb_list = res.zlb_list;
        this.insure_list = res.insure_list;
      })
    }
  },
  mounted() {
    this.getList();
    this.getSelect();
    this.rent_list = [
      { id: "RENT_PHONE", name: "物品租赁-手机" },
      { id: "RENT_COMPUTER", name: "物品租赁-电脑\平板" },
      { id: "RENT_CAMERA", name: "物品租赁-数码摄像" },
      { id: "RENT_DIGITAL", name: "物品租赁-数码其他" },
      { id: "RENT_STATIONERY", name: "物品租赁-电子词典\电纸书\文化用品" },
      { id: "RENT_CLOTHING", name: "物品租赁-服装" },
      { id: "RENT_LUGGAGE", name: "物品租赁-箱包" },
      { id: "RENT_OUTDOOR_EQUIPMENT", name: "物品租赁-户外装备" },
      { id: "RENT_GYM_EQUIPMENT", name: "物品租赁-健身器材" },
      { id: "RENT_INSTRUMENT", name: "物品租赁-乐器" },
      { id: "RENT_MATERNAL_INFANT_GOODS", name: "物品租赁-母婴用品" },
      { id: "RENT_MATERNAL_INFANT_TOY", name: "物品租赁-玩具" },
      { id: "RENT_ORNAMENT", name: "物品租赁-家具饰品" },
      { id: "RENT_COOK_UTENSIL", name: "物品租赁-厨房/烹饪用具" },
      { id: "RENT_HARDWARE_STORAGE", name: "物品租赁-收纳整理" },
      { id: "RENT_HARDWARE", name: "物品租赁-五金/工具" },
      { id: "RENT_OFFICE_ELECTRIC", name: "物品租赁-办公电器" },
      { id: "RENT_OFFICE_FURNITURE", name: "物品租赁-办公家具" },
      { id: "RENT_PET", name: "物品租赁-宠物" },
      { id: "RENT_FESTIVE_GOODS", name: "物品租赁-节庆用品" },
      { id: "RENT_PHOTOGRAPHY_SERVICE", name: "物品租赁-婚庆/摄影/摄像服务" },
      { id: "RENT_CAR_GOODS", name: "物品租赁-汽车/用品/配件/改装" },
      { id: "RENT_HOUSEHOLD_ELECTRIC", name: "物品租赁-大家电" },
      { id: "RENT_LIFE_ELECTRIC", name: "物品租赁-生活电器" },
      { id: "RENT_VIRTUAL_GOODS", name: "物品租赁-游戏相关" },
      { id: "RENT_MEDICAL_INSTRUMENT", name: "物品租赁-OTC药品/医疗器械/计生用品" },
      { id: "RENT_VIDEO_GAME", name: "物品租赁-电玩/配件/游戏/攻略" },
      { id: "RENT_GOLD", name: "物品租赁-珠宝/钻石/翡翠/黄金" },
      { id: "RENT_HOME_CARE", name: "物品租赁-家庭保健" },
      { id: "RENT_GREEN_PLANT", name: "物品租赁-鲜花速递/花卉仿真/绿植园艺" },
      { id: "RENT_BRAND_SERVER", name: "物品租赁-品牌台机/品牌一体机/服务器" },
      { id: "RENT_SECONDHAND_DIGITAL", name: "物品租赁-二手数码" },
      { id: "RENT_NETWORK_EQUIPMENT", name: "物品租赁-网络设备" },
      { id: "RENT_KITCHENWARE", name: "物品租赁-厨房电器" },
      { id: "RENT_ACCESSORIES", name: "物品租赁-配件" },
      { id: "RENT_INTELLIGENT_EQUIPMENT", name: "物品租赁-智能设备" },
      { id: "RENT_DIGITAL_LOW", name: "物品租赁-数码小额" },
      { id: "RENT_UMBRELLA", name: "物品租赁-雨伞" }
    ]
    this.zlb_list = [
      { id: "3c_mobile", name: "3C办公-手机" },
      { id: "3c_pc", name: "3C办公-电脑" },
      { id: "3c_camera", name: "3C办公-摄影" },
      { id: "3c_office", name: "3C办公-办公设备" },
      { id: "3c_other", name: "3C办公-其他" },
      { id: "iot_auto_container", name: "IOT-售卖柜" },
      { id: "iot_stage", name: "IOT-驿站" },
      { id: "iot_other", name: "IOT-其他" },
      { id: "ne_battery", name: "新能源-电池" },
      { id: "ne_electric_car", name: "新能源-电动车" },
      { id: "ne_other", name: "新能源-其他" },
      { id: "general_furniture", name: "泛行业-家具" },
      { id: "general_tv", name: "泛行业-家电" },
      { id: "general_other", name: "泛行业-其他" },
    ]
  }
}
</script>

<style lang="scss" scoped>
</style>
